<template>
  <div class="favor">
    <button @click="handleClick">切换</button>
    <Transition name="text" @enter="onEnter" @leave="onLeave">
      <p v-show="isShow">你好啊，我叫陈析晰</p>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from "vue"
const isShow = ref(true)
const handleClick = () => {
  isShow.value = !isShow.value
}
const onEnter = () => {
  console.log("进入")
}
const onLeave = () => {
  console.log("离开")
}
</script>

<style lang="less" scoped>
p {
  position: absolute;
}

.text-enter-active,
.text-leave-active {
  transition: all .5s ease-in;
}

.text-enter-from,
.text-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style>
